<script setup lang="ts">
import { provide, reactive } from 'vue';
import {myStore} from '@/store/my'
import ExcellentSkillPopup from './ExcellentSkillPopup.vue'
const store = myStore()

const state = reactive({
  show: false
})
const closeChange = () => {
  state.show = false
  store.getResumeDetails()
}
const props = defineProps({
    page: {
        type: String
    }
})
provide('popup', {
    closeChange
})
</script>

<template>
    <div class="resume-label">
        <h3>擅长技能<van-icon name="add-o" @click="state.show=true" v-if="props.page!=='preview'" /></h3>
        <dl class="text-list" v-if="store.state.resumeInfo.sys_skill_ids || store.state.resumeInfo.skill_ids">
            <dt v-for="item in store.state.resumeInfo.sys_skill_ids.split(',')">{{ item }}</dt>
            <dt v-for="item in store.state.resumeInfo.skill_ids.split(',')">{{ item }}</dt>
        </dl>
        <label v-else>请您选择擅长技能</label>
    </div>
    <!-- 切换弹窗 -->
    <van-popup 
            v-model:show="state.show" 
            position="top"
            duration="0"
            :style="{ height: '100%', width: '100%' }" 
        >
            <ExcellentSkillPopup />
    </van-popup>
</template>
<style scoped>
.text-list dt {
    font-weight: 300;
    font-size: 0.59rem;
    line-height: 0.59rem;
    color: #666666;
    line-height: 0.34rem;
    padding: 0.4rem 0.5rem;
    margin-right: 0.27rem;
    margin-bottom: 0.3rem;
    background: #F6F7F8;
    border-radius: 0.16rem;
    display: inline-block;
}
</style>